import { AtRate } from 'taro-ui'
import React, { Component } from 'react';
import Taro, { getCurrentInstance } from '@tarojs/taro';
import { View, Image, Text, ScrollView } from '@tarojs/components'
import { debounce } from '@/utils'
import { getList } from '@/api/order/evaluate'

import './index.scss'

type State = {
    page: number
    lock: boolean
    list: any
}
export default class Index extends Component<any, State> {
    $instance = getCurrentInstance();

    constructor() {
        super(...arguments)
        this.state = {
            page: 1,
            lock: false,
            list: []
        }
    }

    componentDidMount() {
        this.getList()
        console.log(this.$instance.router.params)
    }

    onScrollToLower = debounce(e => {
        let { page, lock } = this.state
		if (!lock) {
			page++
			this.setState({
				page
			}, () => {
				this.getList()
			})
		}
    }, 200)

    async getList() {
        let { lock, page, list } = this.state
        const { id } = this.$instance.router.params
        let perPage = 20

        if (lock) return
		let res = await getList({
            goodsId: id,
			query: {
				// filter: {
				// 	and: [{
				// 		position: selectType
				// 	}]
                // },
				perPage,
				page
			}
        })

        let data = res.data.data
		if (data.length < perPage) {
			lock = true
        }
        this.setState({
            lock,
            list: [...list, ...data]
		})
    }

    //预览评价图片
    previewImage(current,urls){
        Taro.previewImage({
            current, // 当前显示图片的http链接
            urls, // 需要预览的图片http链接列表
          })
    }

    render() {
        // let introduce = [1, 2, 3]
        const { list } = this.state
        let lowerThreshold = 50
        const scrollStyle = {
			height: '100vh'
		}

        let serviceEvaluateView = <View className='goods-details-blockview'>
            <View className='goods-details-evaluate'>
                <View className='goods-details-evaluate-cont'>
                    {
                        list.map((i, Idx) => {
                            return (
                                <View key={String(Idx)} className='goods-details-evaluate-cont-li'>
                                    <View className='head'>
                                        <View className='head-top'>
                                            <View className='left'>
                                                <View className='left-wrap'>
                                                    <Image className='brand-img' mode='aspectFill' src={i.brandLogo} lazyLoad />
                                                    <Text className='car-license'>{i.carLicense}</Text>
                                                </View>
                                                <Text className='brand-name'>{i.carSeriesName}</Text>
                                            </View>

                                            <Text className='date'>{i.commentDate}</Text>
                                        </View>
                                        <View className='head-bottom'>
                                            <Text className='range-text'>评分:</Text>
                                            <AtRate size={15} value={i.goodsGrade} />
                                        </View>
                                    </View>
                                    <View className='content'>
                                        <View className='content-desc'>
                                            {i.commentContent}
                                        </View>
                                        <View className='content-pics'>
                                            { i.coverImgUrl.map((img) =>
                                                <Image key={img} className='img' mode='aspectFill' src={img} lazyLoad onClick={()=>this.previewImage(img,i.coverImgUrl)} />
                                            )}
                                        </View>
                                    </View>
                                </View>
                            )
                        })
                    }
                </View>
            </View>
        </View>

        return (
            <View className="goods-details">
                <ScrollView lowerThreshold={lowerThreshold} onScrollToLower={this.onScrollToLower.bind(this)} enableBackToTop scrollY style={scrollStyle}>
                    {serviceEvaluateView}
                </ScrollView>
            </View>
        )
    }
}
